<%--
  Created by IntelliJ IDEA.
  User: haojianlei
  Date: 2018-11-23
  Time: 13:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> <link href="${pageContext.request.contextPath}/assets/shipui/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/ship/ship.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/layui/css/layui.css"  media="all">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

    <style>
        .pay-fee-ship{
            position: relative;
            display: inline-block;
            width:150px;
            height: 100px;
            cursor: pointer;
        }

        .month{
            margin-left: 25px;
            background: url(${pageContext.request.contextPath}/assets/img/login/fee_1month.png) no-repeat center center;
            background-size:cover;
        }
        .year{
            margin-left: 25px;
            background: url(${pageContext.request.contextPath}/assets/img/login/fee_40year.png) no-repeat center center;
            background-size:cover;
        }
        .pay-fee-click{
            border: 1px solid #0095d9;
        }
        .pay-fee-click .check-active2{
            position: absolute;
            bottom: 0px;
            right: 0px;
            display: block;
            width:15px;
            height: 15px;
            background: url(${pageContext.request.contextPath}/assets/img/login/check_icon2.png) no-repeat center center;
        }
    </style>

</head>

<body class="gray-bg">
<div class="row wrapper border-bottom white-bg page-heading" style="padding: 0px 20px 10px">
    <div class="row" style="margin-top: 20px">
        <div class="col-sm-4" style="margin-left: 10px">
            <ol class="breadcrumb">
                <li>
                    <a href="toShipHome.do">运力管理</a>
                </li>
                <li>
                    <strong  data-toggle="modal" data-target="#uploadModel">导入运力</strong>
                </li>
            </ol>
        </div>
        <div class="col-sm-8">
            <%--备用--%>
        </div>
    </div>

</div>

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row" style="margin-top: 10px;margin-left: 10px;font-size: 16px;font-weight: bold">
                        <h4>导入方法：1、下载模板 2、往模板添加数据 3、上传</h4>
                    </div>
                    <div class="row" style="margin-top: 20px;margin-left: 10px">
                        第1步，请点击下方按钮下载模板
                        <p> <a class="btn btn-default" type="button" href="${pageContext.request.contextPath}/excel/shipInfo.xlsx" style="margin-top: 10px">点击下载模板</a></p>
                    </div>

                    <div class="row" style="margin-top: 20px;margin-left: 10px">
                        第2步，请使用excel打开模板，并填写信息
                    </div>

                    <div class="row" style="margin-top: 20px;margin-left: 10px;">
                        第3步，请点击下方按钮上传模板
                        <p><button type="button" class="btn btn-primary" id="test3" style="width: 180px;height: 50px;margin-top: 25px"><i class="layui-icon"></i>上传文件</button></p>
                    </div>

                    <div class="row" id="importTxtTips" style="margin-top: 10px;margin-left: 10px;display: none">
                        <span style="color: green">成功上传<span id="successCount"></span>条，</span><span style="color: red">失败<span id="failCount"></span>条</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%--扣费提示模态框--%>
<div class="modal inmodal fade" id="uploadModel" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog"  style="width:30%;">
        <div class="modal-content" style="text-align: center;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h5 class="modal-title">选择扣费方式</h5>
            </div>
            <div class="modal-body">
                <input type="hidden" id="shipList">
                <input type="hidden" id="consumeId">
                <div class="row">
                    <input type="radio" name="time" value="3" id="year"  style="display:none" onclick="addOrdernumber()"/><label  class="pay-fee-ship year"  for="year"><i class="check-active2"></i></label>
                    <input type="radio" name="time"  value="2" id="month" style="display:none" onclick="addOrdernumber()"/><label class="pay-fee-ship month"  for="month"><i class="check-active2"></i></label>

                    <%--<input type="radio" id="month" name="time" value="2" onclick="addOrdernumber()"/><label for="month">按月扣费(5元/船/月)</label>--%>
                    <%--<input type="radio" value="3" id="year" name="time" onclick="addOrdernumber()"/><label for="year">按年扣费（40元/船/年）</label>--%>

                </div>
            </div>


            <div class="modal-footer" style="text-align: center;margin-top: 15px">
                <div class="form-group">
                    <div class="row" >
                        <%--<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>--%>
                        <button type="button" class="btn btn-primary" style="width: 220px" onclick="addUserAndShip()">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="${pageContext.request.contextPath}/assets/shipui/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/assets/shipui/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${pageContext.request.contextPath}/assets/layui/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/assets/shipui/js/plugins/sweetalert/sweetalert.min.js"></script>


<!-- 自定义js -->
<script src="${pageContext.request.contextPath}/assets/shipui/js/content.js?v=1.0.0"></script>
<link href="css/plugins/steps/jquery.steps.css" rel="stylesheet">

<script type="text/javascript">
    $(function() {
        $(".shipTabText").click(function () {
            $(".shipTabText").removeClass("shipTabText-click");
            $(this).addClass("shipTabText-click");
        })
    })

    function importShip() {
        window.open("toImportShip.do");
    }
</script>
<script>
    var jsonObj;
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;


        //指定允许上传的文件类型
        upload.render({
            elem: '#test3'
            ,url: 'ship/uploadUtil.do'
            ,accept: 'file' //普通文件
            ,exts: 'xlsx'
            ,done: function(res){
                if (res.message=="SUCCESS") {
                    jsonObj =  res.shipList;
                    // console.log(jsonObj);
                    $("#successCount").text(res.shipListCount);
                    $("#failCount").text(res.rowCounts);
                    $("#uploadModel").modal("show");
                    document.getElementById("importTxtTips").style.display=""//显示
                }else{
                    swal({
                        title: res.message,
                        text: "请仔细检查模板是否填写完整，或者格式是否正确！",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "确定",
                        closeOnConfirm: false,
                    })

                    // alert(res.message);
                }
            }
        });
    });
</script>
<script type="text/javascript">

    function addOrdernumber() {
        var data = {
            shipList:jsonObj,
            consumeTypeId:$("input[name='time']:checked").val()
        }
        $.ajax({
            type : 'post',
            url : 'deductions/generatingOrder.do',
            dataType : 'json',
            data:JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            async : false,
            success : function(data) {
                if (data.SUCCESS ==true){
                    $("#consumeId").val(data.consumeId);
                }else {
                    swal({
                        title: data.MSG,
                        text: "请按提示操作哦~",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "确定",
                        closeOnConfirm: false
                    }, function () {
                        window.location.href="toRecharge.do";
                    });
                    // alert(data.MSG);
                }
            }
        });
    }

    function addUserAndShip() {
        var data = {
            shipList:jsonObj,
            consumeId:$("#consumeId").val()
        }
        $.ajax({
            type : 'post',
            url : 'ship/insertShipAndByShipId.do',
            dataType : 'json',
            data:JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            async : false,
            success : function(data) {
                if (data.SUCCESS ==true){

                    swal({
                        title: data.MSG,
                        text: "已自动为您添加到自有运力！",
                        type: "success",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "确定",
                    }, function () {
                        window.location.href="toShipHome.do";
                    });
//
//                    alert(data.MSG);
//                    $("#uploadModel").modal('hide');
                }else {
                    alert(data.MSG);
                }
            }
        });

    }
    //    计费选择的模态框

    $(function() {

        $(".year").click(function(){
            $(".pay-fee-ship").removeClass("pay-fee-click");
            $(this).addClass("pay-fee-click");
        })

        $(".month").click(function(){
            $(".pay-fee-ship").removeClass("pay-fee-click");
            $(this).addClass("pay-fee-click");
        })

    });
</script>


</body>

</html>
